<script setup lang="ts">
import { ref, shallowRef, watch } from 'vue'
import { useInteractionTip } from './interaction-tip'
import { setInteractionNormal } from './core'

const tip = useInteractionTip()
const title = ref<string>('')
const content = shallowRef<string[]>([])

watch(tip, () => {
  const t = tip.value
  title.value = t?.title || ''
  content.value = t ? t.content.split('\n') : []
})
</script>
<template>
  <div class="map-pane interaction-tip-view">
    <template v-if="tip">
      <div class="pane-heading">
        <div class="pane-title">{{ title }}</div>
      </div>
      <div class="pane-block">
        <div v-for="line in content" class="row">
          {{ line }}
        </div>
      </div>
      <div class="pane-footer is-right">
        <div class="cancel-btn" @click="setInteractionNormal">取消</div>
      </div>
    </template>
  </div>
</template>

<style lang="scss">
@import '@/map/style/var';

.interaction-tip-view {
  .pane-block {
    min-width: 20em;
    max-width: 30em;
    min-height: 7em;
  }
  .cancel-btn {
    border-bottom: 1px solid $map-fg;
    cursor: pointer;
  }
}
</style>
